Customizing Column Display Names

When working with data from ThoughtSpot or other sources, column names may contain technical formatting or be less user-friendly (e.g., "Month(Order Date)" or "Total Discount"). Muze's displayAs.columns option allows you to set custom display names for your columns while keeping the original column names in your data queries.

Why Use Column Aliases?

Column aliases help you:

• Display user-friendly names in charts, tooltips, and legends
• Hide technical formatting from end users
• Maintain consistency across multiple visualizations
• Keep original column names intact for data processing

Setting Column Aliases

Basic Syntax

Use setGlobalOptions to configure column aliases globally:

const { muze, setGlobalOptions } = viz;

setGlobalOptions({
  displayAs: {
    columns: {
      "original_column_name": "Display Name",
      "another_column": "Friendly Name"
    }
  }
});

Complete Example

Here's a practical example showing how to create cleaner, more readable chart labels:

/**
 * Available Columns:
 * "Total Discount"
 * "Month(Order Date)"
 * --- END --- 
 */

const {
    muze,
    globalOptions,
    setGlobalOptions,
    getDataFromSearchQuery,
} = viz;

setGlobalOptions({
    displayAs: {
        // Set alias name for columns.
        columns: {
            "Total Discount": "Discount",
            "Month(Order Date)": "Order Date"
        }
    }
});

const data = getDataFromSearchQuery();

muze.canvas()
.rows(["Total Discount"])
.columns(["Month(Order Date)"])
.data(data)
.mount("#chart");